/*
 * @Author: your name
 * @Date: 2020-12-21 15:20:31
 * @LastEditTime: 2020-12-22 16:57:20
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \jQueryd:\vue\QF\js\index.js
 */
Vue.component('mybox', {
    template: `
        <div>
        <!-- 导航头部 -->
        <div class="nav">
          <div class="logo">
            <img
              src="https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cDovLzU1OWE0NDdjNzMyZWUudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wNS9jMThkMmUyZWIxYTE5Nzg3M2NhNzM4YWI1ZmYwZGM3MS5wbmc_p_p100_p_3D.png"
              alt=""
            />
          </div>
          <div class="nav_list">
            <!-- this nav -->
            <ul>
              <div style="color: orangered">产品</div>
              <div>功能</div>
              <div>关于</div>
              <div>团队</div>
              <div>销售</div>
              <div>项目</div>
              <div>价格</div>
              <div>服务</div>
              <div>评级</div>
              <div>联系</div>
            </ul>
          </div>
        </div>
        <!-- here banner -->
        <div class="banner">
          <el-carousel indicator-position="outside">
            <el-carousel-item v-for="item in arr" :key="item">
              <div
                class="imgbox"
                :style="{backgroundImage:'url('+item.imgurl+')',backgroundSize:'100% 100%'}"
              >
                <div class="tabletext">
                  <div>{{item.text}}</div>
                  <div>{{item.content}}</div>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    `,
    data() {
        return {
            arr: [
                {
                    imgurl: 'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTgvMTAvMDNkYTM3MTQ2YjA1YzM5MTM1YWFjYWE4YTdlZDNkZDguanBn.jpg',
                    text: '做一个精彩的站点',
                    content: '为情怀而干杯，告别朴素的重复和一望无际的平庸',
                },
                {
                    imgurl: 'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvNzliN2NkY2QxNGRiMTRlOWNiNDk4ZjE3OTM4MTdkNjktNTAweDMwMC5qcGc_p_p100_p_3D.jpg',
                    text: '我在灯火阑珊处',
                    content: '起飞页是放飞梦想的地方，也是寻梦的地方',
                },
            ],

        }
    }
})
Vue.component("mytop", {
    template: `
     <div>
        <!-- title -->
        <div class="titlebox">
          <h4>{{title.title}}</h4>
          <div class="iconboder">
            <span class="bor"></span>
            <span class="icon iconfont icon-label"></span>
            <span class="bor"></span>
          </div>
          <slot name="content"></slot>
          <div class="tp">
            <slot></slot>
          </div>
        </div>
      </div>
    `,
    props: ["title"],
});

Vue.component("myli", {
    template: `
    <div>
        <div style="padding: 50px 80px; overflow: hidden">
          <div class="module_list" v-for="i in arr1">
            <div>
              <i :class="i.i"></i>
              <h4>{{i.title}}</h4>
              <p>{{i.text}}</p>
            </div>
          </div>
        </div>
      </div>
    `,
    props: ['title'],
    data() {
        return {
            arr1: [
                {
                    i: 'el-icon-cpu',
                    title: '一页式模板',
                    text: '起飞页不仅是一个方便快捷的构建网站'
                },
                {
                    i: 'el-icon-set-up',
                    title: '全屏呈现',
                    text: '满屏效果，信息更少，空白更多'
                }, {
                    i: 'el-icon-postcard',
                    title: '响应式设计',
                    text: '起飞页不仅是一个方便快捷的构建网站'
                }, {
                    i: 'el-icon-copy-document',
                    title: '免费试用',
                    text: '起飞页不仅是一个方便快捷的构建网站'
                }, {
                    i: 'el-icon-present',
                    title: '支持WIN10',
                    text: '起飞页不仅是一个方便快捷的构建网站'
                }, {
                    i: 'el-icon-shopping-cart-2',
                    title: '一键部署',
                    text: '起飞页不仅是一个方便快捷的构建网站'
                },
            ],
        }
    }

});
Vue.component("gywm", {
    template: `
    <div>
        <div class="gy">
          <div class="bottom">
            <div class="bottombox">
              <h2>关于我们</h2>
              <div class="iconboder">
                <span class="bor"></span>
                <solt class="icon iconfont icon-kafei"></solt>
                <span class="bor"></span>
              </div>
              <div>
                起飞页不仅是一个方便快捷的构建网站的自助建站平台，更重要的是，我们为中国用户提供了更多贴心的服务：网站备案、自动备份、快速恢复以及网站代建服务。我们使用了国内和香港最好的网络和云服务器，确保您的网站能够快速完美的呈现在访客面前。
              </div>
              <div style="padding: 20px 0; color: #ff5100; font-weight: bold">
                起飞页自主建站平台
              </div>
            </div>
          </div>
        </div>
      </div>
    `,
    props: ["title"],
});
Vue.component("tem", {
    template: `
      <div>
        <div
          style="
            padding: 30px 0;

            height: 400px;
          "
        >
          <el-carousel height="480px">
            <el-carousel-item
              v-for="(item,$index) in 2"
              :key="$index"
              style="padding: 0 50px; box-sizing: border-box"
            >
              <div v-for="(i,index) in arr" class="bin">
                <div><img :src="i.imgurl" alt="" /></div>
                <div>{{i.name}}</div>
                <div>{{i.zhi}}</div>
                <div>{{i.text}}</div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    `,
    props: ["title"],
    data() {
        return {
            arr: [{
                imgurl: 'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvYmU3YTcyNzAzZjVjZDZjYzc3MmQ0N2E1Y2QyZGJjOTctNDAweDQwMC5qcGc_p_p100_p_3D.jpg',
                name: '彭 少宏',
                zhi: 'CEO总经理',
                text: '您可以双击这里或者点击编辑按钮来修改内容，您可以添加按钮图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。'
            }, {
                imgurl: 'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvYTNkNDA0Mjg2MmVkNjE3Mzk0M2QwOTQ4M2M5NjM3NGMtNDAweDQwMC5qcGc_p_p100_p_3D.jpg',
                name: '张 义栋',
                zhi: '工程师',
                text: '您可以双击这里或者点击编辑按钮来修改内容，您可以添加按钮图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。'
            }, {
                imgurl: 'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvZmYxNDZkZjNiODBkMmE0M2FmNTZhYzY3Nzk3YWEwZDUtNDAweDQwMC5qcGc_p_p100_p_3D.jpg',
                name: '郭 思燕',
                zhi: '客服代表',
                text: '您可以双击这里或者点击编辑按钮来修改内容，您可以添加按钮图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。'
            }, {
                imgurl: 'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvYTI2NzI2YzFlMDJhM2ZiNjRlNWM0MmM0MzEwZWFlMzktNDAweDQwMC5qcGc_p_p100_p_3D.jpg',
                name: '梁 亚萍',
                zhi: '客服代表',
                text: '您可以双击这里或者点击编辑按钮来修改内容，您可以添加按钮图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。'
            },
            ],
        }
    }
});
Vue.component('hp', {
    template: `
      <div>
        <div>
          <div class="gy chanpin">
            <div class="bottom">
              <div class="bottombox" v-for="i in arr">
                <h2>{{title.title}}</h2>
                <div class="iconboder">
                  <span class="bor"></span>
                  <solt class="icon iconfont icon-kafei"></solt>
                  <span class="bor"></span>
                </div>
                <div>{{i.content}}</div>
                <div class="xm">
                  <div v-for="i in arr3" class="shu">
                    <span class="spa">{{i.text}}</span>
                    <p>{{i.shu}}</p>
                    <i :class="i.i"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    `,
    props: ['title'],
    data() {
        return {
            arr: [
                { title: '产品销售', tb: 'icon-shequ', content: '很少人会做第一个吃螃蟹的人，我们不妨避开让人尴尬的数据而展示一些客户愿意看的漂亮数据' },

            ],
            arr1: [{ title: '产品价格', tb: 'icon-meiyuan4', content: '起飞页不仅是一个方便快捷的构建网站的自助建站平台，更重要的是，我们为中国用户提供了更多贴心的服务' }],
            arr3: [
                {
                    i: 'el-icon-user-solid',
                    text: '737',
                    shu: '发 布 版 本'
                }, {
                    i: 'el-icon-user-solid',
                    text: '9257',
                    shu: '部 署 客 户'
                }, {
                    i: 'el-icon-user-solid',
                    text: '68',
                    shu: '荣 获 奖 项'
                }, {
                    i: 'el-icon-user-solid',
                    text: '62',
                    shu: '用 户 好 评'
                },
            ],
        }
    }

})
Vue.component('xmzs', {
    template: `
     <div>
        <titlebox>
          <div
            class="duotu"
            style="
              padding: 10px 0 100px;
              overflow: hidden;
              position: relative;
              height: 300px;
            "
          >
            <ul>
              <li v-for="(i,$index) in arr" @click="index=$index">
                {{i.text}}
              </li>
            </ul>
            <transition name="no2" v-for="(i,$index) in arr">
              <div v-show="$index == index" style="position: absolute">
                <transition v-for="a in 8" name="no1">
                  <div v-show="$index == index">
                    <p></p>
                    <img :src="i.tu[a-1].imgurl" />
                  </div>
                </transition>
              </div>
            </transition>
          </div>
        </titlebox>
      </div>
    `,
    data() {

        return {
            index: 0,
            arr: [
                {
                    text: '活动策划',
                    tu: [{
                        imgurl: 'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvNzliN2NkY2QxNGRiMTRlOWNiNDk4ZjE3OTM4MTdkNjktNTAweDMwMC5qcGc_p_p100_p_3D.jpg',
                    }, {
                        imgurl: 'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvMWJhY2VjZjE5ZmNhOGIwNDllZTU1OGY1ZDFkYmVhNTEtNTAweDMwMC5qcGc_p_p100_p_3D.jpg',
                    }, {
                        imgurl: 'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvNzhmY2E0MjkyMzIzOWFhNGU3ZGIwNDBmMjc5ZDhmOTctNTAweDMwMC5qcGc_p_p100_p_3D.jpg',
                    }, {
                        imgurl: 'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvZjQwODQwY2Q3OTcxZDdkODQ5ZWRjYjI5NjRmODIwNmYtNTAweDMwMC5qcGc_p_p100_p_3D.jpg',
                    }, {
                        imgurl: 'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvMzc5MDE2MTk1MDExZGQ3NzkxZGNmZjY3OTZkNDg2YzktNTAweDMwMC5qcGc_p_p100_p_3D.jpg',
                    }, {
                        imgurl: 'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvYmQ1ZmU4MGQ0ODZlZmQwYTE0MDA0MWZjMGZiNWEzMDktNTAweDMwMC5qcGc_p_p100_p_3D.jpg',
                    }, {
                        imgurl: 'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvNzAzYTY3NzNmOTEwYmQwMzMwNGVkNTRjZjBmZDRlNGYtNTAweDMwMC5qcGc_p_p100_p_3D.jpg',
                    }, {
                        imgurl: 'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvNjYxZDZlNzNhMWU5MWU3NDAzNzQ1MWQwOWExOTA4ODYtNTAweDMwMC5qcGc_p_p100_p_3D.jpg'
                    }]
                },
                {
                    text: '画册设计',
                    tu: [{
                        imgurl: 'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvNzliN2NkY2QxNGRiMTRlOWNiNDk4ZjE3OTM4MTdkNjktNTAweDMwMC5qcGc_p_p100_p_3D.jpg',
                    }, {
                        imgurl: 'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvMWJhY2VjZjE5ZmNhOGIwNDllZTU1OGY1ZDFkYmVhNTEtNTAweDMwMC5qcGc_p_p100_p_3D.jpg',
                    }, {
                        imgurl: 'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvNzhmY2E0MjkyMzIzOWFhNGU3ZGIwNDBmMjc5ZDhmOTctNTAweDMwMC5qcGc_p_p100_p_3D.jpg',
                    }, {
                        imgurl: 'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvZjQwODQwY2Q3OTcxZDdkODQ5ZWRjYjI5NjRmODIwNmYtNTAweDMwMC5qcGc_p_p100_p_3D.jpg',
                    }, {
                        imgurl: 'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvMzc5MDE2MTk1MDExZGQ3NzkxZGNmZjY3OTZkNDg2YzktNTAweDMwMC5qcGc_p_p100_p_3D.jpg',
                    }, {
                        imgurl: 'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvYmQ1ZmU4MGQ0ODZlZmQwYTE0MDA0MWZjMGZiNWEzMDktNTAweDMwMC5qcGc_p_p100_p_3D.jpg',
                    }, {
                        imgurl: 'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvNzAzYTY3NzNmOTEwYmQwMzMwNGVkNTRjZjBmZDRlNGYtNTAweDMwMC5qcGc_p_p100_p_3D.jpg',
                    }, {
                        imgurl: 'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvNjYxZDZlNzNhMWU5MWU3NDAzNzQ1MWQwOWExOTA4ODYtNTAweDMwMC5qcGc_p_p100_p_3D.jpg'
                    }]
                }, {
                    text: '电影宣传片制作',
                    tu: [
                        {
                            imgurl: 'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvNzliN2NkY2QxNGRiMTRlOWNiNDk4ZjE3OTM4MTdkNjktNTAweDMwMC5qcGc_p_p100_p_3D.jpg',
                        }, {
                            imgurl: 'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvMWJhY2VjZjE5ZmNhOGIwNDllZTU1OGY1ZDFkYmVhNTEtNTAweDMwMC5qcGc_p_p100_p_3D.jpg',
                        }, {
                            imgurl: 'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvNzhmY2E0MjkyMzIzOWFhNGU3ZGIwNDBmMjc5ZDhmOTctNTAweDMwMC5qcGc_p_p100_p_3D.jpg',
                        }, {
                            imgurl: 'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvZjQwODQwY2Q3OTcxZDdkODQ5ZWRjYjI5NjRmODIwNmYtNTAweDMwMC5qcGc_p_p100_p_3D.jpg',
                        }, {
                            imgurl: 'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvMzc5MDE2MTk1MDExZGQ3NzkxZGNmZjY3OTZkNDg2YzktNTAweDMwMC5qcGc_p_p100_p_3D.jpg',
                        }, {
                            imgurl: 'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvYmQ1ZmU4MGQ0ODZlZmQwYTE0MDA0MWZjMGZiNWEzMDktNTAweDMwMC5qcGc_p_p100_p_3D.jpg',
                        }, {
                            imgurl: 'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvNzAzYTY3NzNmOTEwYmQwMzMwNGVkNTRjZjBmZDRlNGYtNTAweDMwMC5qcGc_p_p100_p_3D.jpg',
                        }, {
                            imgurl: 'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvNjYxZDZlNzNhMWU5MWU3NDAzNzQ1MWQwOWExOTA4ODYtNTAweDMwMC5qcGc_p_p100_p_3D.jpg'
                        }]
                },
            ],
        }
    }
})
Vue.component('cpjg', {
    template: `
    <div>
        <div class="gy">
          <div class="bp">
            <div class="bottombox">
              <h2>产品价格</h2>
              <div class="iconboder">
                <span class="bor"></span>
                <solt class="icon iconfont icon-kafei"></solt>
                <span class="bor"></span>
              </div>
              <div>
                起飞页不仅是一个方便快捷的构建网站的自助建站平台，更重要的是，我们为中国用户提供了更多贴心的服务
              </div>
              <div
                class="fei1"
                style="padding: 50px 150px; box-sizing: border-box"
              >
                <div
                  v-for="i in arr"
                  style="
                    z-index: 99999;
                    width: 30%;
                    float: left;
                    background-color: #fff;
                    margin: 1.5%;
                    color: black;
                  "
                >
                  <p
                    style="
                      color: #fff;
                      height: 50px;
                      line-height: 50px;
                      font-size: 20px;
                      font-weight: bold;

                      opacity: 1;
                    "
                  >
                    {{i.title}}
                  </p>
                  <p
                    style="
                      font-weight: bold;
                      font-size: 30px;
                      line-height: 100px;
                      border-bottom: 1px solid #ccc;
                    "
                  >
                    {{i.text}}<span
                      style="font-size: 14px; background-color: #fff"
                      >/月</span
                    >
                  </p>
                  <div
                    style="
                      height: 150px;
                      padding: 50px 0;
                      border-bottom: 1px solid #ccc;
                      line-height: 24px;
                      font-size: 14px;
                      color: #99a9bf;
                    "
                  >
                    流量5G/每月<br />
                    空间1G自动<br />
                    备份每日自动备份<br />
                    技术支持邮件/QQ/电话
                  </div>
                  <p style="padding: 10px 0">
                    <span
                      style="
                        display: inline-block;
                        width: 100px;
                        height: 50px;
                        color: #ffffff;
                        line-height: 50px;
                      "
                      >联系客服</span
                    >
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    `,
    data() {
        return {
            arr: [
                { title: '基础版', text: '￥99' },
                { title: '高级版', text: '￥159' },
                { title: '终极版', text: '￥299' }
            ],
        }
    }
})
Vue.component('myfw', {
    template: `
      <div>
        <div style="width: 100%; box-sizing: border-box; overflow: hidden">
          <div
            v-for="i in arr"
            style="width: 20%; margin: 1.5%; float: left; padding: 20px 13px"
          >
            <i
              :class="i.i"
              style="font-size: 30px; padding: 20px; color: #8e8e8e"
            ></i>
            <p style="font-size: 20px">{{i.title}}</p>
            <p style="padding: 20px 0; color: #8e8e8e; text-align: left">
              {{i.text}}
            </p>
          </div>
        </div>
      </div>
    `,
    data() {
        return {
            arr: [
                {
                    i: 'el-icon-right',
                    title: '服 务 介 绍',
                    text: '応损捠捡换攳，攴朰朲朳枛朸桸桹桺奿妀。夲夳夵壱売壳圢圤圥圦圧！圩圪囡団囤囥咍咎，咐咑厺厼厽桻桼忝忞帄帇帉帊峢'
                }, {
                    i: 'el-icon-right',
                    title: '服 务 介 绍',
                    text: '応损捠捡换攳，攴朰朲朳枛朸桸桹桺奿妀。夲夳夵壱売壳圢圤圥圦圧！圩圪囡団囤囥咍咎，咐咑厺厼厽桻桼忝忞帄帇帉帊峢'
                }, {
                    i: 'el-icon-right',
                    title: '服 务 介 绍',
                    text: '応损捠捡换攳，攴朰朲朳枛朸桸桹桺奿妀。夲夳夵壱売壳圢圤圥圦圧！圩圪囡団囤囥咍咎，咐咑厺厼厽桻桼忝忞帄帇帉帊峢'
                }, {
                    i: 'el-icon-right',
                    title: '服 务 介 绍',
                    text: '応损捠捡换攳，攴朰朲朳枛朸桸桹桺奿妀。夲夳夵壱売壳圢圤圥圦圧！圩圪囡団囤囥咍咎，咐咑厺厼厽桻桼忝忞帄帇帉帊峢'
                },
            ],
        }
    }
})
Vue.component('khpj', {
    template: `
     <div>
        <div class="footer">
          <div class="left">
            <div class="center-block">
              <h2>联系我们</h2>
              <div class="iconboder">
                <span class="bor"></span>
                <solt class="icon iconfont icon-youxiang"></solt>
                <span class="bor"></span>
              </div>
            </div>
            <div class="lyb">
              <input type="text" class="form-control" placeholder="姓名" />
              <input type="text" class="form-control" placeholder="邮箱" />

              <textarea
                style="width: 600px; margin-top: 10px"
                class="form-control"
                rows="3"
                placeholder="留言"
              ></textarea>
              <div style="margin-top: 20px; text-align: center">
                <button type="button" class="btn btn-primary btn-sm">
                  发送
                </button>
              </div>
            </div>
          </div>
          <div class="right">
            <div class="center-block">
              <h2>关注我们</h2>
              <div class="iconboder">
                <span class="bor"></span>
                <solt class="icon iconfont icon-aixin_shixin"></solt>
                <span class="bor"></span>
              </div>
            </div>
            <div>
              起飞页不仅是一个方便快捷的构建网站的自助建站平台，更重要的是，我们为中国用户提供了更多贴心的服务：网站备案、自动备份、快速恢复以及网站代建服务。我们使用了国内和香港最好的网络和云服务器，确保您的网站能够快速完美的呈现在访客面前。
            </div>
            <div class="zuihou1">
              <i class="el-icon-phone"></i>
              <i class="el-icon-user"></i>
              <i class="el-icon-picture"></i>
              <i class="el-icon-picture"></i>
            </div>
          </div>
        </div>
        <div class="fg"></div>
      </div>
    `,
}

)
window.onscroll = function () {
    var top = document.documentElement.scrollTop
    var nav = document.querySelector('.nav')
    if (top >= 200) {
        nav.style.position = "fixed"
        nav.style.background = 'rgba(0,0,0,.5)'
    } else {
        nav.style.position = "absolute"
        nav.style.background = 'none'
    }
}